<%@ page import="cn.work.bean.reservationBean" %>
<%@ page import="java.util.List" %>
<%@ page import="java.sql.SQLException" %><%--
  Created by IntelliJ IDEA.
  User: eternal
  Date: 2024/11/9
  Time: 18:41
  To change this template use File | Settings | File Templates.
--%>
<%--后台预约管理界面--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>预约管理</title>
    <link rel="stylesheet" href="../css/admin_yuyue.css" />
    <link rel="stylesheet" href="../css/admin_nav.css" />
    <link rel="stylesheet" href="../css/admin.css" />
</head>
<!-- 在其他 JavaScript 文件之前引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<body>
<!--
导入公共头部jsp文件
-->
<jsp:include page="admin.jsp" />
<div class="content">
    <jsp:include page="admin_nav.jsp" />
    <div class="main">
            <div class="top">
                <label>
                    <input type="text" placeholder="请输入搜索内容" class="search" />
                    <button type="button" id="searchbtn">搜索</button>
                </label>
                <div class="rightButton">
                    <button class="batch" id="batch1" type="button">批量完成</button>
                    <button class="batch" id="batch2" type="button">批量取消</button>
                    <button class="batch" id="batch3" type="button">批量删除</button>

                </div>
                <button class="add btn" type="button">添加预约</button>
            </div>
            <div class="content_table">
                <table>
                    <thead>
                    <tr>
                        <div class="border-right">
                            <th class="select" style="width: 30px"><input type="checkbox" id="selectAll"></th>
                        </div>
                        <th class="number"style="width: 60px">序号</th>
                        <th style="width: 110px">用户名</th>
                        <th style="width: 100px">项目</th>
                        <th style="width: 90px">状态</th>
                        <th style="width: 130px">姓名</th>
                        <th style="width: 130px">美容师</th>
                        <th class="short" style="width: 110px">日期</th>
                        <th class="time" style="width: 105px">时间段</th>
                        <th style="width: 130px">联系电话</th>
                        <th style="width: 180px">备注</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="tbody"></tbody>
                </table>
            </div>

    </div>
</div>
<div class="add_appoitment">
    <h2>新增预约</h2>
    <p>
        <label for="name">姓名：</label>
        <input type="text" id="name" class="one" placeholder="请输入姓名" required/>
    </p>
    <p>
        <label for="tel">手机号：</label>
        <input type="tel" id="tel" class="one" placeholder="请输入手机号" required pattern="^[0-9]{11}$"/>
    </p>
    <p>
        <label for="service_name">预约项目：</label>
        <select id="service_name" class="form-control-lg" required>
            <!-- 选项内容 -->
        </select>
    </p>
    <p>
        <label for="beau_name">美容师：</label>
        <select id="beau_name" class="form-control form-control-sm" required>
            <!-- 选项内容 -->
        </select>
    </p>
    <p>
        <label for="date-select">选择日期：</label>
        <select id="date-select" class="form-control form-control-sm" required>
            <!-- 选项内容 -->
        </select>
    </p>
    <p>
        <label for="period">时间段：</label>
        <select id="period" class="form-control form-control-sm" required>
                <option value="" disabled selected>请选择时间段</option>
                <option value="1" data-time="09:00">09:00-10:00</option>
                <option value="2" data-time="10:00">10:00-11:00</option>
                <option value="3" data-time="11:00">11:00-12:00</option>
                <option value="4" data-time="14:00">14:00-15:00</option>
                <option value="5" data-time="15:00">15:00-16:00</option>
                <option value="6" data-time="16:00">16:00-17:00</option>
        </select>
    </p>
    <div style="display: flex; justify-content: space-between; gap: 10px;">
        <button class="add_cancel">取消</button>
        <button class="submit_app">确认</button>
    </div>
</div>

<div class="overlay"></div>

<div class="overlay"></div>


<!-- 添加模态框HTML -->
<div class="modal completed-modal">
    <div class="modal-content">
        <h3>确认完成</h3>
        <p>确认要将此预约标记为已完成吗？</p>
        <div class="modal-buttons">
            <button class="modal-cancel">取消</button>
            <button class="modal-confirm">确认</button>
        </div>
    </div>
</div>

<div class="modal cancel-modal">
    <div class="modal-content">
        <h3>确认取消</h3>
        <p>确认要取消此预约吗？</p>
        <div class="modal-buttons">
            <button class="modal-cancel">取消</button>
            <button class="modal-confirm">确认</button>
        </div>
    </div>
</div>

<div class="modal delete-modal">
    <div class="modal-content">
        <h3>确认删除</h3>
        <p>确认要删除此预约记录吗？此操作不可恢复！</p>
        <div class="modal-buttons">
            <button class="modal-cancel">取消</button>
            <button class="modal-confirm">确认</button>
        </div>
    </div>
</div>

<div class="modal batch1-modal">
    <div class="modal-content">
        <h3>确认完成</h3>
        <p>确认要将选中的预约标记为已完成吗？</p>
        <div class="modal-buttons">
            <button class="batch-cancel">取消</button>
            <button class="batch-confirm">确认</button>
        </div>
    </div>
</div>

<div class="modal cancel-modal">
    <div class="modal-content">
        <h3>确认取消</h3>
        <p>确认要取消选中的预约吗？</p>
        <div class="modal-buttons">
            <button class="batch-cancel">取消</button>
            <button class="batch-confirm">确认</button>
        </div>
    </div>
</div>

<div class="modal delete-modal">
    <div class="modal-content">
        <h3>确认删除</h3>
        <p>确认要删除选中的预约记录吗？此操作不可恢复！</p>
        <div class="modal-buttons">
            <button class="batch-cancel">取消</button>
            <button class="batch-confirm">确认</button>
        </div>
    </div>
</div>
<script src="../js/admin_yuyue.js"></script>
</body>
</html>
